<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.panel{
			max-width: 300px;
			border: 1px solid #999;
			margin-bottom: 15px;

		}

		.panel > * {
			padding: 15px;
		}

		.panel .title {
			border-bottom:  1px solid #999;
		}

		.panel .footer {
			border-top: 1px solid #999;
		}
	</style>
</head>
<body>
	<div id="app">
		<panel>
			<div slot="title">Hahahaha!</div>
			<div slot="content">nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server</div>
			
		</panel>

	</div>


	<template id="panel-tpl">
		<div class="panel">
			<div class="title">
				<slot name="title"></slot>
			</div>
			<div class="content">
				<slot name="content"></slot>
			</div>
			<div class="footer">
				<slot name="footer">更多内容</slot>
			</div>		
		</div>
	</template>


	
<script type="text/javascript" src="vue.min.js"></script>	
<script type="text/javascript" src="slot.js"></script>
</body>
</html>